/*
  学习目标：jsx的插值表达式 - 与vue是一样的
  表达式： 可以写在等号右边
  1. 基本类型 number string boolean undefined null
  2. 对象，数组
  3. 其他： 函数、三元、逻辑、 JSX本身
*/
import React from 'react';
import ReactDOM from 'react-dom';
const str = 'abc';
const num = 10;

const divNode = (
  <div>
    {/* react中，插值表达式是一个 花括号，vue是2个 */}
    {/* number string ✅ 可以正常显示 */}
    {str}
    {num}
    <div>{100}</div>
    {/* boolean undefined null 💥页面上是不显示的 */}
    <div>
      {true} - {String(true)}
    </div>
    <div>
      {false} - {String(false)}
    </div>
    <div>
      {undefined} - {String(undefined)}
    </div>
    <div>
      {null} - {String(null)}
    </div>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
